<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="startTime">
        <time-range-picker
          :start.sync="list.filter.startTime"
          :end.sync="list.filter.endTime"
          type="date-time"
        />
      </el-form-item>
      <el-form-item prop="companyId">
        <el-select
          v-model="list.filter.companyId"
          filterable
          remote
          reserve-keyword
          placeholder="企业名称"
          :remote-method="getCompany"
          clearable
        >
          <el-option
            v-for="item in companyList"
            :key="item.companyId"
            :label="item.companyName"
            :value="item.companyId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="userName">
        <el-input
          v-model="list.filter.userName"
          placeholder="操作人"
          clearable
        />
      </el-form-item>
      <el-form-item prop="account">
        <el-input
          v-model="list.filter.account"
          placeholder="操作账号"
          clearable
        />
      </el-form-item>
      <el-form-item prop="operate">
        <el-input
          v-model="list.filter.operate"
          placeholder="操作名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div></div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column align="center" type="index" />
      <el-table-column label="操作时间" prop="time" />
      <el-table-column label="操作人账号" prop="account" />
      <el-table-column label="操作人" prop="userName" />
      <el-table-column label="企业名称" prop="companyName" />
      <el-table-column label="部门名称" prop="departmentName" />
      <el-table-column label="IP地址" prop="remoteAddr" />
      <el-table-column label="请求参数" prop="requestArgs">
        <template slot-scope="{ row }">
          <el-button
            @click="$refs.jsonView.showDialog(row.requestArgs)"
            size="mini"
          >
            预览
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="返回结果" prop="responseArgs">
        <template slot-scope="{ row }">
          <el-button
            @click="$refs.jsonView.showDialog(row.responseArgs)"
            size="mini"
          >
            预览
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作名称" prop="operate" />
    </el-table>

    <json-view ref="jsonView" />
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import { TimeRangePicker } from 'time-range-picker'
import jsonView from './components/json-view.vue'

export default {
  mixins: [pageMixin],
  components: { TimeRangePicker, jsonView },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/sys/sysLog',
      axiosConfig: {
        getList: {
          url: 'queryForList'
        }
      },
      list: {
        filter: {
          startTime: TimeRangePicker.defaultDate.currentDay[0],
          endTime: TimeRangePicker.defaultDate.currentDay[1]
        }
      }
    }),
  data () {
    return {
      companyList: []
    }
  },
  methods: {
    getCompany (name) {
      this.companyList = []
      if (name != '') {
        this.$POST('sot-admin-api/company/listForSelect', {
          companyName: name
        }).then(res => {
          if (res.errorCode == '00000') {
            this.companyList = res.data
          }
        })
      }
    }
  }
}
</script>
